<template>
  <view class="content">
    <view class="list">
      <view class="listItem" style="height: ;">
        <view class="lable">
          头像
        </view>
        <view class="ipt" @tap="upImg()">
          <image class="avatarImg" :src="form.avatar" mode=""></image>
          <image class="rImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="listItem">
        <view class="lable">
          昵称
        </view>
        <view class="ipt" style="width: 60%;">
          <input type="text" v-model="form.nickname" style="width: 100%;">
        </view>
      </view>
      <view class="listItem">
        <view class="lable">
          性别
        </view>
        <view class="ipt" @tap="screenShow = true">
          <span v-if="form.gender == 1">男</span>
          <span v-else-if="form.gender == 2">女</span>
          <span v-else>未知</span>
          <image class="rImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="listItem" @tap="screenShows = true">
        <view class="lable">
          身份
        </view>
        <view class="ipt">
          <span v-for="(item,i) in form.identity_data">{{item}}{{','}}</span>
          <image class="rImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="listItem">
        <view class="lable">
          手机
        </view>
        <view class="ipt" style="width: 60%;">
          <input type="text" v-model="form.mobile" style="width: 100%;">
        </view>
      </view>
      <view class="listItem">
        <view class="lable">
          微信
        </view>
        <view class="ipt" style="width: 60%;">
          <input type="text" v-model="form.wx_num" placeholder="暂无微信号" style="width: 100%;">
        </view>
      </view>
    </view>
   <view class="bc operateBtn" @tap="edit_user_info()">
     保存
   </view>
  <view class="tc operateBtn" @tap="exitLogin()">
    退出登录
  </view>


    <!-- 筛选 -->
    <u-popup :show="screenShow" @close="screenShow = false"  @open="screenOpen" mode="bottom" closeable :safeAreaInsetTop="true"
      closeIconPos="top-right" width="100%" height="500rpx">
      <view class="screenContent">
        <view class="itemBox">
          <view class="title">
            性别
          </view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in gender" :key="i" @tap="screenBtn(item,3)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="screenBtns">
          <view class="btn" @tap="screenShow = false">
            取消
          </view>
          <view class="btn" style="background: #7D81A9;color: #fff;margin-right: 0;" @tap="screenShow = false">
            确认
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 筛选 -->
    <u-popup :show="screenShows" @close="screenShows = false" @open="screenOpen" mode="bottom" closeable
      :safeAreaInsetTop="true" closeIconPos="top-right" width="100%" height="500rpx">
      <view class="screenContent">
        <view class="itemBox">
          <view class="title">
            请选择身份
          </view>
         <view class="itemListBox">
           <view class="item" :class="{active : item.flag}" v-for="(item,i) in category_data" :key="i"
             @tap="identity_typeBtn(item)">
             {{item.name}}
           </view>
         </view>
        </view>
        <view class="screenBtns">
          <view class="btn" @tap="resetting">
            重置
          </view>
          <view class="btn" style="background: #7D81A9;color: #fff;margin-right: 0;" @tap="confirmType">
            确认
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        screenShow: false,
        screenShows: false,
        gender: [{
            id: 1,
            name: '男',
            flag: false
          },
          {
            id: 2,
            name: '女',
            flag: false
          }
        ],
        category_data: [{
            id: 1,
            name: '商家',
            flag: false
          },
          {
            id: 2,
            name: '达人',
            flag: false
          },
          // {
          //   id: 3,
          //   name: '团长',
          //   flag: false
          // },
          {
            id: 4,
            name: '服务商',
            flag: false
          },
          {
            id: 5,
            name: '官方平台',
            flag: false
          }
        ],
        form: {},
        model1: {
          userInfo: {
            name: 'uView UI',
            sex: '',
          },
        },
        radio: '',
        switchVal: false
      };
    },
    async onLoad() {
      const res = await uni.$http.post('user/get_user_info')
      console.log('5555', res.data.data);
      this.form = res.data.data
    },
    methods: {
      async edit_user_info () {
        const {data :res} = await uni.$http.post('user/edit_user_info',this.form)
        if(res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        uni.showToast({
          icon: 'success',
          title: res.msg,
          duration: 2000
        })
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/my/my',
          });
        }, 2000)
      },
      // 点击图片上传
      upImg() {
        const _this = this;
        uni.chooseImage({
          count: 1, //最多可以选择的图片张数，默认9
          sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
          sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
          success(res) {
            // 调用上传图片的接口
            console.log(res);
            _this.uploadPhoto(res.tempFilePaths);
          },
        })

      },
      uploadPhoto(tempFilePaths) {
        console.log(tempFilePaths[0]);
        const that = this;
        uni.uploadFile({
          url: 'https://skdjmwj99.bxsmmcy.com/api/others/upload_evaluate', //开发者服务器 url
          header: {
            'token': uni.getStorageSync('token')
            // 'token': '97e8f791-13a5-4fc0-ae8e-9877abce1234'
          },
          filePath: tempFilePaths[0], // 要上传文件资源的路径
          name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
          success(res) {
            var result = JSON.parse(res.data)
            if (result.code != 1) {
              that.toast.msg(res.msg)
              return
            }
            that.form.avatar = result.data.url
          },
        })
      },
      confirmFilter() {
        this.category_data.forEach((item) => {
          if (item.flag == true) {
            this.form.identity_type = this.form.identity_type + item.id + ','
          }
          console.log(this.form.identity_type);
        })
         this.form.identity_type = this.form.identity_type.substring(0, this.form.identity_type.lastIndexOf(','))
        this.screenShow = false
      },

      screenBtn(i, n) {
        console.log(i);
        if (n == 3) {
          this.gender.forEach((item) => {
            if (i.id == item.id) {
              i.flag = !i.flag
            } else {
              item.flag = false
            }
          })
        } else {
          i.flag = !i.flag
        }
        this.form.gender = i.id
      },
      identity_typeBtn(i) {
        console.log(i);
        this.category_data.forEach((item) => {
          if (i == item) {
            i.flag = !i.flag
          }
        })
      },
      confirmType() {
        let str = ''
        this.form.identity_data = []
        this.category_data.forEach((item) => {
          if (item.flag == true) {
            str += item.id + ','
            this.form.identity_data.push(item.name)
          }
        })
       str = str.substring(0, str.lastIndexOf(','))
       this.form.identity_type = str
       this.screenShows = false
      },
      // 退出
      exitLogin(){
        uni.clearStorageSync()
        uni.showToast({
          icon: 'none',
          title: "退出登录成功",
          duration: 1000
        })
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/my/my',
          });
        }, 1000)
      }
    },
    onReady() {
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules)
    },
  };
</script>
<style lang="scss">
  .content {
    height: 100vh;
    background-color: #f2f3f6;
    padding: 24rpx 32rpx;
    .operateBtn {
      width: 686rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      background: #7D81A9;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      margin: 0 auto;
    }
    .bc {
      margin-top: 40rpx;
    }
    .tc {
      background: rgba(194,196,215,0.34);
      color: #7D81A9;
      margin-top: 32rpx;
    }
    .list {
      width: 686rpx;
      height: 644rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.8);
      padding-left: 40rpx;

      .lable {
        color: rgba(0, 0, 0, 0.4);
      }

      .listItem {
        height: 108rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 42rpx;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

        input {
          text-align: right;
        }

        .ipt {
          display: flex;
          align-items: center;
        }

        .avatarImg {
          width: 80rpx;
          height: 80rpx;
          border-radius: 40rpx;
        }

        .rImg {
          width: 12rpx;
          height: 12rpx;
          margin-left: 16rpx;
        }
      }
    }
  }

  .screenContent {
    padding: 30rpx;
    padding-right: 0;
    box-sizing: border-box;
    overflow: scroll;

    .itemBox {
      margin-bottom: 10rpx;

      .title {
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        margin-bottom: 32rpx;
      }
      .itemListBox {
        .item {
          display: inline-block;
          width: 156rpx;
          height: 64rpx;
          background: #F2F3F6;
          border-radius: 200rpx;
          margin-right: 22rpx;
          margin-bottom: 32rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          text-align: center;
          line-height: 64rpx;
        }
        
        .item:nth-child(4n) {
          margin-right: 0;
        }
        .active {
          background-color: #7D81A9;
          color: #FFFFFF;
        }
      }
      

     
    }

    .screenBtns {
      width: 662rpx;
      margin: 0 auto;
      margin-top: 40rpx;
      display: flex;

      .btn {
        width: 320rpx;
        height: 80rpx;
        border-radius: 40rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        color: #7D81A9;
        border: 2rpx solid rgba(125, 129, 169, 0.3);
        box-sizing: border-box;
        margin-right: 22rpx;
      }
    }
   
  }
</style>